<script setup>
import { ref, computed } from "vue";
import { ElMessage, ElMessageBox, ElTag, ElImage } from 'element-plus';
import { Plus } from '@element-plus/icons-vue'
import * as admin from '@/api/index.js'
import { useTokenStore } from '@/stores/token.js';
const tokenStore = useTokenStore();

// 模拟课程数据
const courses = ref([]);
const total = ref(0);
// 模拟分页
const currentPage = ref(1);
const pageSize = ref(4);
const totalPages = computed(() => Math.ceil(courses.value.length / pageSize.value));

function nextPage() {
  if (currentPage.value < totalPages.value) {
    currentPage.value++;
  }
}

function prevPage() {
  if (currentPage.value > 1) {
    currentPage.value--;
  }
}

const currentCourses = computed(() => {
  const startIndex = (currentPage.value - 1) * pageSize.value;
  return courses.value.slice(startIndex, startIndex + pageSize.value);
});

const findData = async () => {
  const res = await admin.findCourse({
    currentPage: currentPage.value,
    token: tokenStore.token,
  });
  if (res.code == 0) {
    courses.value = res.data;
    total.value = res.total;
  }
};

// 预约课程
const bookCourse = async (course) => {
  const res = await admin.addCourseEnrollment({
    currentPage: currentPage.value,
    token: tokenStore.token,
    courseId: course.id,
  });
  if (res.code == 0) {
    ElMessage.success(`已预约课程：${course.title}`);
  }
  
};

const handlePageChange = (page) => {
  currentPage.value = page;
  findData();
};

findData()
</script>

<template>
  <div class="course-page">
    <!-- 课程列表 -->
    <div class="course-list">
      <div class="course-item" v-for="(course, index) in courses" :key="index">
        <img :src="course.img" alt="课程图片" class="course-image" />
        <div class="course-info">
          <h3 class="course-title">{{ course.title }}</h3>
          <p class="course-description">{{ course.description }}</p>
          <p class="course-teacher">授课老师: {{ course.yonghu }}</p>
          <el-button type="primary" class="book-button" @click="bookCourse(course)">预约课程</el-button>
        </div>
      </div>
    </div>

    <!-- 分页 -->
    <div class="pagination-container">
      <el-pagination
        background
        layout="prev, pager, next"
        :total="total"
        :page-size="pageSize"
        @current-change="handlePageChange"
      />
    </div>
  </div>
</template>

<style lang="scss" scoped>
.course-page {
  padding: 20px;
  background-color: #f7f8fa;
}

/* 课程列表 */
.course-list {
  display: grid;
  grid-template-columns: repeat(4, 1fr); /* 每行四列 */
  gap: 20px;
}

.course-item {
  background-color: white;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease;
}

.course-item:hover {
  transform: translateY(-5px);
}

.course-image {
  width: 100%;
  height: 150px;
  object-fit: cover;
}

.course-info {
  padding: 10px;
}

.course-title {
  font-size: 18px;
  font-weight: bold;
  color: #333;
  margin: 10px 0;
}

.course-description {
  font-size: 14px;
  color: #666;
}

.course-teacher {
  font-size: 14px;
  color: #333;
}

.book-button {
  width: 100%;
  margin-top: 10px;
}

/* 分页 */
.pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 20px;
  gap: 10px;
}

.el-button {
  font-size: 14px;
}



.pagination-container {
  display: flex;
  justify-content: center;
  margin-top: 30px;
}

::v-deep(.el-pagination) {
  font-size: 18px; // 放大字体
}

::v-deep(.el-pagination .el-pager li) {
  padding: 0 12px;     // 增加间距
  height: 40px;
  line-height: 40px;
  font-size: 18px;
}

::v-deep(.el-pagination button) {
  font-size: 18px;
  padding: 0 12px;
}

</style>
